<template>
  <div class="app-container">
    <!-- 高级查询 -->
    <el-form v-show="searchVisible" ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="销售客户:">
        <el-input v-model="queryParams.customerNo" size="small" placeholder="请输入销售客户" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="产品ID:">
        <el-input v-model="queryParams.skuOrSpuId" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="应用时间开始:">
        <el-date-picker v-model="queryParams.applyDate" type="date" value-format="yyyy-MM-dd" size="small" placeholder="选择应用时间开始" clearable />
      </el-form-item>
      <el-form-item label="有效期至:">
        <el-date-picker v-model="queryParams.effectUntilDate" type="date" value-format="yyyy-MM-dd" size="small" placeholder="选择有效期至" clearable />
      </el-form-item>
      <el-form-item label="结算单位名称:">
        <el-input v-model="queryParams.unitName" size="small" placeholder="请输入结算单位名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="分类ID:">
        <el-input v-model="queryParams.categoryId" size="small" placeholder="请输入分类ID" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
     <el-form-item label="品牌ID:">
        <el-input v-model="queryParams.brandId" size="small" placeholder="请输入品牌ID" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="品牌名称:">
        <el-input v-model="queryParams.brandName" size="small" placeholder="请输入品牌名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="产品规格:">
        <el-input v-model="queryParams.materialGuige" size="small" placeholder="请输入产品规格" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button v-hasPermission="['accounting:materialSalesPrice:insert']" type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-hasPermission="['accounting:materialSalesPrice:update']" type="success" icon="el-icon-edit" size="mini" :disabled="isSingle" @click="handleEdit">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-hasPermission="['accounting:materialSalesPrice:delete']" type="danger" icon="el-icon-delete" size="mini" :disabled="isMultiple" @click="handleRemove">删除</el-button>
      </el-col>
      <right-toolbar :show-search.sync="searchVisible" @queryTable="handleQuery" />
    </el-row>

    <!-- 数据列表 -->
    <el-table v-loading="loading" :data="page.records" highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="组合/单品" align="center" prop="settleUnitType" />
      <el-table-column label="销售客户" align="center" prop="customerNo" />
      <el-table-column label="产品ID" align="center" prop="skuOrSpuId" />
      <el-table-column label="结算价格" align="center" prop="settlePrice" />
      <el-table-column label="应用时间开始" align="center" prop="applyDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.applyDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="有效期至" align="center" prop="effectUntilDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.effectUntilDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结算单位名称" align="center" prop="unitName" />
      <el-table-column label="分类ID" align="center" prop="categoryId" />
      <el-table-column label="分类名称" align="center" prop="categoryName" />
      <el-table-column label="品牌ID" align="center" prop="brandId" />
      <el-table-column label="品牌名称" align="center" prop="brandName" />
      <el-table-column label="产品规格" align="center" prop="materialGuige" />
      <el-table-column label="结算维度1" align="center" prop="dimensionOne" />
      <el-table-column label="结算维度2" align="center" prop="dimensionTwo" />
      <el-table-column label="结算维度3" align="center" prop="dimensionThree" />
      <el-table-column label="结算维度4" align="center" prop="dimensionFour" />
      <el-table-column label="结算基于" align="center" prop="settleBy" />
      <el-table-column label="订单数量" align="center" prop="wholeSaleQuantity" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="价格还是%" align="center" prop="priceDefType" />
      <el-table-column label="百分比" align="center" prop="priceSettlePercentage" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-hasPermission="['module:materialSalesPrice:update']" size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">修改</el-button>
          <el-button v-hasPermission="['module:materialSalesPrice:delete']" size="mini" type="text" icon="el-icon-delete" @click="handleRemove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination v-show="page.total>0" :total="page.total" :page.sync="page.current" :limit.sync="page.pageSize" @pagination="handleQuery" />

    <!-- 添加/修改对话框 -->
    <el-dialog :title="materialSalesPriceFormDialog.title" :visible.sync="materialSalesPriceFormDialog.visible" :close-on-click-modal="false" :before-close="resetMaterialSalesPriceFormDialog" width="500px" append-to-body>
      <el-form ref="materialSalesPriceForm" :model="materialSalesPriceFormData" :rules="materialSalesPriceFormRules" label-width="80px">
        <el-form-item label="销售客户" prop="customerNo">
          <el-input v-model="materialSalesPriceFormData.customerNo" placeholder="请输入销售客户" />
        </el-form-item>
        <el-form-item label="产品选择" prop="skuOrSpuId">
          <el-input v-model="materialSalesPriceFormData.skuOrSpuId" placeholder="请输入结算按sku还是spu 就是单品结算还是组合结算" />
        </el-form-item>
        <el-form-item label="结算价格" prop="settlePrice">
          <el-input v-model="materialSalesPriceFormData.settlePrice" placeholder="请输入结算价格" />
        </el-form-item>
        <el-form-item label="应用时间开始" prop="applyDate">
          <el-date-picker v-model="materialSalesPriceFormData.applyDate" type="date" value-format="yyyy-MM-dd" size="small" style="width: 200px" placeholder="选择应用时间开始" clearable />
        </el-form-item>
        <el-form-item label="有效期至" prop="effectUntilDate">
          <el-date-picker v-model="materialSalesPriceFormData.effectUntilDate" type="date" value-format="yyyy-MM-dd" size="small" style="width: 200px" placeholder="选择有效期至" clearable />
        </el-form-item>
        <el-form-item label="结算单位名称" prop="unitName">
          <el-input v-model="materialSalesPriceFormData.unitName" placeholder="请输入结算单位名称" />
        </el-form-item>
        <el-form-item label="分类ID" prop="categoryId">
          <el-input v-model="materialSalesPriceFormData.categoryId" placeholder="请输入分类ID" />
        </el-form-item>
        <el-form-item label="分类名称" prop="categoryName">
          <el-input v-model="materialSalesPriceFormData.categoryName" placeholder="请输入分类名称" />
        </el-form-item>
        <el-form-item label="品牌ID" prop="brandId">
          <el-input v-model="materialSalesPriceFormData.brandId" placeholder="请输入品牌ID" />
        </el-form-item>
        <el-form-item label="品牌名称" prop="brandName">
          <el-input v-model="materialSalesPriceFormData.brandName" placeholder="请输入品牌名称" />
        </el-form-item>
        <el-form-item label="产品规格" prop="materialGuige">
          <el-input v-model="materialSalesPriceFormData.materialGuige" placeholder="请输入产品规格" />
        </el-form-item>
        <el-form-item label="结算基于" prop="settleBy">
          <el-input v-model="materialSalesPriceFormData.settleBy" placeholder="请输入结算基于" />
        </el-form-item>
        <el-form-item label="订单数量" prop="wholeSaleQuantity">
          <el-input v-model="materialSalesPriceFormData.wholeSaleQuantity" placeholder="请输入订单数量" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="materialSalesPriceFormData.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="采购价格配置表的主键" prop="buyPriceDefId">
          <el-input v-model="materialSalesPriceFormData.buyPriceDefId" placeholder="请输入采购价格配置表的主键" />
        </el-form-item>
        <el-form-item label="百分比" prop="priceSettlePercentage">
          <el-input v-model="materialSalesPriceFormData.priceSettlePercentage" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmMaterialSalesPriceFormDialog">确 定</el-button>
        <el-button @click="resetMaterialSalesPriceFormDialog">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MaterialSalesPriceApi from '@/api/accounting/MaterialSalesPriceApi'

const defaultMaterialSalesPriceFormData = {
  settleUnitType: null,
  customerNo: null,
  skuOrSpuId: null,
  settlePrice: null,
  applyDate: null,
  effectUntilDate: null,
  unitName: null,
  categoryId: null,
  categoryName: null,
  brandId: null,
  brandName: null,
  materialGuige: null,
  dimensionOne: null,
  dimensionTwo: null,
  dimensionThree: null,
  dimensionFour: null,
  dimensionFive: null,
  dimensionSix: null,
  dimensionSeven: null,
  dimension: null,
  settleBy: null,
  wholeSaleQuantity: null,
  priceDefType: null,
  buyPriceDefId: null,
  priceSettlePercentage: null
}
export default {
  name: 'MaterialSalesPriceList',
  data() {
    return {
      options: {
        sysYnTypeOptions: this.$constant.sysYnTypeOptions
      },
      queryParams: {
        settleUnitType: null,
        customerNo: null,
        skuOrSpuId: null,
        settlePrice: null,
        applyDate: null,
        effectUntilDate: null,
        unitName: null,
        categoryId: null,
        categoryName: null,
        brandId: null,
        brandName: null,
        materialGuige: null,
        dimensionOne: null,
        dimensionTwo: null,
        dimensionThree: null,
        dimensionFour: null,
        dimensionFive: null,
        dimensionSix: null,
        dimensionSeven: null,
        dimension: null,
        settleBy: null,
        wholeSaleQuantity: null,
        priceDefType: null,
        buyPriceDefId: null,
        priceSettlePercentage: null,
        isValid: this.$constant.Y
      },
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
        records: []
      },
      materialSalesPriceFormDialog: {
        title: '',
        visible: false
      },
      materialSalesPriceFormData: Object.assign({}, defaultMaterialSalesPriceFormData),
      materialSalesPriceFormRules: {
      },
      loading: true,
      searchVisible: true,
      multipleSelection: [],
      isSingle: true,
      isMultiple: true
    }
  },
  created() {
    this.handleQuery()
    this.loadOptions()
  },
  methods: {
    loadOptions() {
    },
    handleAdd() {
      this.openMaterialSalesPriceFormDialog()
    },
    handleRemove(row) {
      const ids = row.id || this.multipleSelection.map(item => item.id)
      this.$confirm('是否确认删除数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return MaterialSalesPriceApi.remove(ids)
      }).then(() => {
        this.handleQuery()
        this.$message.success('删除成功')
      })
    },
    handleEdit(row) {
      const id = row.id || this.multipleSelection.map(item => item.id)[0]
      this.openMaterialSalesPriceFormDialog(id)
    },
    handleQuery() {
      this.loading = true
      MaterialSalesPriceApi.page(this.queryParams, this.page).then(response => {
        this.page.records = response.data.records
        this.page.total = response.data.total
        this.loading = false
      }, () => {
        this.loading = false
      })
    },
    handleExport() {
      this.$confirm('是否确认导出数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return MaterialSalesPriceApi.exportData(this.queryParams)
      }).then(response => {
        this.$common.download(response.data)
      })
    },
    openMaterialSalesPriceFormDialog(id) {
      this.materialSalesPriceFormDialog.visible = true
      if (id) {
        this.materialSalesPriceFormDialog.title = '销售价格配置基础，用于配置价格，产生最后结算。-修改'
        MaterialSalesPriceApi.get(id).then(response => {
          this.materialSalesPriceFormData = {
            ...this.materialSalesPriceFormData,
            ...response.data
          }
        })
      } else {
        this.materialSalesPriceFormDialog.title = '销售价格配置基础，用于配置价格，产生最后结算。-添加'
      }
    },
    confirmMaterialSalesPriceFormDialog() {
      this.$refs['materialSalesPriceForm'].validate(valid => {
        if (valid) {
          if (this.materialSalesPriceFormData.id) {
            MaterialSalesPriceApi.edit(this.materialSalesPriceFormData).then(response => {
              this.$message.success('修改成功')
              this.resetMaterialSalesPriceFormDialog()
              this.handleQuery()
            })
          } else {
            MaterialSalesPriceApi.add(this.materialSalesPriceFormData).then(response => {
              this.$message.success('添加成功')
              this.resetMaterialSalesPriceFormDialog()
              this.handleQuery()
            })
          }
        }
      })
    },
    resetMaterialSalesPriceFormDialog() {
      this.materialSalesPriceFormDialog = {
        title: '',
        visible: false
      }
      this.materialSalesPriceFormData = Object.assign({}, defaultMaterialSalesPriceFormData)
      this.resetForm('materialSalesPriceForm')
    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection
      this.isSingle = selection.length !== 1
      this.isMultiple = !selection.length
    },
    resetQuery() {
      this.page.current = 1
      this.resetForm('queryForm')
      this.handleQuery()
    }
  }
}
</script>
